<template>
  <div class="input-field-committee-workgroup" :class="{
    active: localShowDetails,
  }">
    <div class="wg-title full-width text-center cursor-pointer"
      @click="localShowDetails = !localShowDetails">
      {{ localData.ID }} {{ localData.Name }}工作组
    </div>

    <div class="wg-details full-width" v-if="localShowDetails">
      <input-field
        v-for="(field, idx) in fields" :key="idx"
        :Field="{
          ...field,
          ReadOnly: Field.ReadOnly,
        }"
        :values="localData"
        @input="$emit('input')"></input-field>
    </div>
  </div>
</template>

<script>
import { InputFieldMixin } from 'eis-admin-mixins';

export default {
  name: 'InputFieldCommitteeWorkgroup',
  mixins: [InputFieldMixin],
  fieldInfo: {
    DataType: 'Object',
    Category: 'Committee',
    Label: '标准工作组',
    Value: 'CommitteeWorkgroup',
    Description: '',
  },
  props: {
    showDetails: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      localData: {},
      localShowDetails: false,
    };
  },
  computed: {
    fields() {
      return [
        {
          Name: '负责人',
          Label: '负责人',
          Type: 'String',
          Info: {
            ShowWhen: '!!data.负责人',
          },
        },
        {
          Name: '联系方式',
          Label: '联系方式',
          Type: 'String',
          Info: {
            ShowWhen: '!!data.联系方式',
          },
        },
        {
          Name: '工作范围',
          Label: '工作范围',
          Type: 'Text',
          Info: {
            ShowWhen: '!!data.工作范围',
          },
        },
        {
          Name: '组长',
          Label: '组长',
          Type: 'Text',
          Info: {
            ShowWhen: '!!data.组长',
          },
        },
        {
          Name: '副组长',
          Label: '副组长',
          Type: 'Text',
          Info: {
            ShowWhen: '!!data.副组长',
          },
        },
        {
          Name: '联合组长',
          Label: '联合组长',
          Type: 'Text',
          Info: {
            ShowWhen: '!!data.联合组长',
          },
        },
        {
          Type: 'Tabs',
          Name: '工作成效',
          Label: '工作成效',
          Info: {
            ShowWhen: '!!data.工作成效 && !!data.工作成效.length',
          },
          Options: {
            LabelField: 'Year',
            ValueField: '成效',
            ReadOnly: this.Field.ReadOnly,
            HideFieldWhenEmpty: true,
            Fields: [
              {
                Type: 'String',
                Name: '成效.标准',
                Label: '标准',
                ReadOnly: this.Field.ReadOnly,
              },
              {
                Type: 'String',
                Name: '成效.研究报告/白皮书',
                Label: '研究报告/白皮书',
                ReadOnly: this.Field.ReadOnly,
              },
              {
                Type: 'String',
                Name: '成效.测试评估',
                Label: '测试评估',
                ReadOnly: this.Field.ReadOnly,
              },
              {
                Type: 'String',
                Name: '成效.应用推广',
                Label: '应用推广',
                ReadOnly: this.Field.ReadOnly,
              },
            ],
          },
        },
      ];
    },
  },
  watch: {
    localData() {
      this.fieldData = this.localData;
    },
    fieldData() {
      this.localData = this.fieldData;
    },
    showDetails() {
      this.localShowDetails = this.showDetails;
    },
    localShowDetails() {
      this.$emit('update:showDetails', this.localShowDetails);
    },
  },
  created() {
    this.localData = this.fieldData;
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.input-field-committee-workgroup {
  &.active {
    .wg-title {
      background-color: #003b91;
      color: white;
    }
  }

  .wg-title {
    width: unset;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 24px;

    border: 1px solid #003b91;
    border-radius: 6px;
  }

  .wg-details {
    padding: 10px 0;

    :deep(.input-field-wrapper) {
      padding-bottom: 6px;

      .field-label {
        align-self: flex-start;
      }
    }

    :deep(.readonly-content) {
      span {
        white-space: pre-line;
      }
    }
  }
}
</style>
